<!-- 设置动态表单组件--右侧抽屉设置栏 -->
<template>
  <div class="drawer" v-show="selectItem?.uuid">
    <div class="drawer-title">
      <div class="txt"></div>
      <div @click="visible = false">
        <span class="icon-delete iconfont icon" />
      </div>
    </div>
    <a-form
      :disabled="visible"
      ref="formRef"
      layout="vertical"
      class="form"
      :model="form.data"
      :rules="rules"
    >
      <a-form-item field="ctlCnName" label="中文名">
        <a-input
          placeholder="请输入组件中文名称"
          v-model="selectItem.cnName"
          allow-clear
        />
      </a-form-item>
      <a-form-item field="enName" label="英文名">
        <a-input
          placeholder="请输入组件英文名称"
          v-model="selectItem.enName"
          allow-clear
        />
      </a-form-item>
      <a-form-item field="fieldName" label="字段名">
        <a-input
          placeholder="请输入字段名称"
          v-model="selectItem.fieldName"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="是否开启">
        <a-switch
          v-model="selectItem.enable"
          :checkedValue="1"
          :uncheckedValue="2"
        />
      </a-form-item>
      <a-form-item label="是否必填">
        <a-switch
          v-model="selectItem.required"
          :checkedValue="1"
          :uncheckedValue="2"
        />
      </a-form-item>
      <!-- <a-form-item label="隐藏名称">
        <a-switch
          v-model="selectItem.props.hideTitle"
          :checkedValue="1"
          :uncheckedValue="2"
        />
      </a-form-item> -->
      <a-form-item label="默认控件">
        <a-switch
          v-model="selectItem.isDefault"
          :checkedValue="1"
          :uncheckedValue="2"
        />
      </a-form-item>
      <a-form-item label="显示区域:">
        <a-radio-group
          :disabled="form.data.ctlIsDefault === 1"
          type="button"
          v-model="form.data.span"
          @change="emit('componentObjChange', form.data)"
        >
          <a-radio :value="12">50%</a-radio>
          <a-radio :value="24">100%</a-radio>
        </a-radio-group>
      </a-form-item>
      <ExtendedFields
        :props="selectItem.props"
        :ctlIsDefault="selectItem.ctlIsDefault"
        :showFieldList="getComponent?.showFieldList"
        :uuid="componentObj.uuid!"
        @propsChange="propsChange"
      />
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { componentList } from '../../../setupConfig';
import ExtendedFields from './ExtendedFields.vue';
import clonedeep from 'lodash.clonedeep';
import useForm from '@/hooks/useForm';
import useControlFormStore from '@/store/controlForm';
const controlFormStore = useControlFormStore();

const { selectItem } = useForm();
const visible = computed(() => !props.componentObj.uuid);
const emit = defineEmits(['componentObjChange']);
const props = withDefaults(
  //参数说明
  defineProps<{
    componentObj: any;
  }>(),
  {}
);
const rules = {
  ctlCnName: [
    {
      required: true,
      trigger: "['change', 'input', 'blur']",
      message: '请填写中文名称'
    }
  ],
  enName: [
    {
      required: true,
      trigger: "['change', 'input', 'blur']",
      message: '请填写英文名称'
    }
  ],
  fieldName: [
    {
      required: true,
      trigger: "['change', 'input', 'blur']",
      message: '请填写字段名称'
    }
  ]
};
//根据组件code返回组件信息
const getComponent = computed(() => {
  if (!selectItem.value) return;
  return componentList.find(
    (item) =>
      item.componentType ===
      selectItem.value[controlFormStore.fieldNames.componentType]
  );
});

const form = reactive<{ data: any }>({ data: {} });
//监听uuid改变复制componentObj
watch(
  () => props.componentObj.uuid,
  (val) => {
    form.data = clonedeep(props.componentObj);
  }
);

const propsChange = (backProps: any) => {
  //props发生改变
  form.data.props = backProps;
  emit('componentObjChange', form.data);
};
const formRef = ref();
</script>

<style lang="less" scoped>
.drawer {
  width: 300px;
  // position: absolute;
  background: #fff;
  overflow: auto;
  // border-radius: 15px;
  // top: 0;
  // bottom: 0;
  height: 100%;
  transition-property: all;
  transition-duration: 0.3s;
  &-title {
    line-height: 40px;
    height: 40px;
    border-bottom: var(--color-neutral-3) solid 1px;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    font-size: 16px;
    .icon {
      font-size: 20px;
      cursor: pointer;
    }
  }
}
.form {
  padding: 10px;
  box-sizing: border-box;
}
</style>
